<template>
  <div>
    <b-card no-body footer-class="bg-transparent">
      <template #header>
        <b-tags v-model="keys"></b-tags>
      </template>
      <template #footer>
        <div v-for="(item, index) in tags" :key="index" >
          <haier-tag v-model="item.items" :label="item.key"></haier-tag>
        </div>
      </template>
    </b-card>
  </div>
</template>

<script>
import Tag from "@/components/Tag.vue";
export default {
  data() {
    return {
      keys: []
    };
  },
  watch: {
      keys: function(val, old){
          if(val.length < old.length){
              this.tags.forEach(({key},index)=>{
                  if(!val.includes(key)){
                     this.tags.pop(index)
                  }
              })
          }else{
              console.log(this.tags)
              this.tags.push({
                  key: val[val.length - 1],
                  items: [],
              })
          }
      },
    tags: {
      handler() {},
      deep: true,
    },
  },
  model: {
    prop: "tags",
    event: "change",
  },
  components: {
    "haier-tag": Tag,
  },
  props: {
    tags: Array,
  },
};
</script>

<style lang="scss" scoped>
</style>